<template>
  <div id="integralmarket">
    <div id="swpier">
      <mt-swipe :auto="0" :prevent="true">
        <mt-swipe-item v-for="(item,index) in swiper"><img :src="item.imgSrc" alt=""></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="privilege">
     <div class="privilegeBox">
       <div class="privilegeCell">
         <img src="../../public/images/9_03.jpg" alt="">
         <p class="title1">新人礼品</p>
         <p class="title2">到店免费领取品尝</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_05.jpg" alt="">
         <p class="title1">积分当钱花</p>
         <p class="title2">订单消费抵现</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_07.jpg" alt="">
         <p class="title1">下午茶送到家</p>
         <p class="title2">外卖一小时到家</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_16.jpg" alt="">
         <p class="title1">会员日</p>
         <p class="title2">每月17日</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_18.jpg" alt="">
         <p class="title1">换购日</p>
         <p class="title2">每周二</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_20.jpg" alt="">
         <p class="title1">积分权益日</p>
         <p class="title2">每周四</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_32.jpg" alt="">
         <p class="title1">敬请期待</p>
         <p class="title2">消费随意送</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_32.jpg" alt="">
         <p class="title1">敬请期待</p>
         <p class="title2">黑钻定制礼品</p>
       </div>
       <div class="privilegeCell">
         <img src="../../public/images/9_32.jpg" alt="">
         <p class="title1">敬请期待</p>
         <p class="title2">黑钻专享</p>
       </div>
     </div>
   </div>
    <div class="pro">
      <div class="prospe">
        <div v-for="(item,index) in proType1" class="prospeItems">
          <div class="tag">{{ item.type }}</div>
          <div class="title">{{ item.proName }}</div>
          <div class="title2">{{ item.proName }}</div>
          <div class="proImg">
            <img :src="item.imgSrc" alt="">
          </div>
          <div class="proInfo">
            <img class="pointImg" src="../../public/images/10_10.jpg" alt="">
            <span class="point">{{ item.proPrice }}</span>
            积分兑换
          </div>
        </div>
      </div>
      <div class="pronortype">
        <div class="ptype">
          <div class="title">
            <img src="../../public/images/7_03.jpg" alt="">
          </div>
          <div class="cImg">
            <img src="../../public/images/8_03.jpg" alt="">
          </div>
          <div class="proList">
            <div v-for="(item0,index0) in proType2" class="colScroll">
              <ul class="col">
                <li v-for="(item1,index1) in proType2[index0]" class="row">
                  <div class="proImg"><img :src="item1.imgSrc" alt=""></div>
                  <div class="proNmae">{{ item1.proName }}</div>
                  <div class="proInfo">
                    <span class="">积分值</span>
                    <span class="proPrice">{{ item1.proPrice }}</span>
                    <span class="isChioce iconfont icon-icon_shopping_cart"></span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'templatemarket',
  data: function() {
    return {
     swiper: [],
     proType1: [],
     proType2: [],
    }
  },
  // vue 实例创建前
  beforeCreate: function() {
    
  },
  // vue 实例创建后
  created: function() {
    
  },
  // 挂载前
  beforeMount: function() {
    
  },
  // 挂载后
  mounted: function() {
    this.axios.get('/web'+'/getIntegralCateList').then(response=>{
      let data = response.data.data;
      let Data = {
        type: '',
        id: '',
        imgSrc: '',
        proName: '', 
        proPrice: '',
        haveStore: false,
      };
      let proType2 = [];
      // 初始化商品数据
      // - 初始化商品数据
      for(let i=0;i<data.length;i++){
        Data.type = data[i].pc_name;
        Data.id = data[i].pro_id;
        Data.imgSrc = data[i].apic_loc;
        Data.proName = data[i].pro_name;
        Data.proPrice = data[i].pro_score;
        if(data[i].pro_store>0){
          Data.haveStore = true;
        }
        if(data[i].pc_name=="sp") {  // 初始化轮播图
          this.swiper.push(Data);
        }else if(data[i].pc_name=="A") {  // 初始化第一渲染部分
          this.proType1.push(Data);
        }else {  // 初始化第二渲染部分
          proType2.push(Data);
          if(proType2.length>=4){
            this.proType2.push(proType2);
            proType2=[];
          }
        }
      }
      this.proType2.push(proType2);
      
      console.log(this.swiper,this.proType1,this.proType2);
    }).catch(err=>{
      console.log(err)
    })
  },
  // 更新前
  beforeUpdate: function() {
    
  },
  // 更新hou
  updated: function() {
    
  },
  // 销毁前
  beforeDestroy: function() {
    
  },
  // 销毁后
  destroyed: function() {
    
  },
  components: {

  },
  methods: {
  
  }
}
</script>

<style lang="less">
@import '../style/config.less';

#integralmarket {
  .px2rem(margin-top,360);
  .px2rem(margin-bottom,190);
  .px2rem(width,1080);
  
  
  #swpier {
    width: 100%;
    height: 200px;
    background-color: yellow;
    
    img {
      width: 100%;
      height: 100%
    }
  }
  
  .privilege {
    .px2rem(height,728);
    background-color: #f7eff7;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .privilegeBox {
      .px2rem(width,1024);
      .px2rem(height,700);
      background-color: white;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      
      .privilegeCell {
        width: 33.33%;
        text-align: center;
        box-sizing: border-box;
        .px2rem(padding,30);
        
        img {
          .px2rem(width,85);
          .px2rem(height,85);
        }
        
        .title1 {
          .px2rem(font-size,32);
          font-weight: 700;
        }
        
        .title2 {
          .px2rem(font-size,25);
        }
      }
      
    }
  }
  
  .pro {
    .px2rem(width,1080);
    
    .prospe {
      .px2rem(height,955);
      display: flex;
      flex-wrap: wrap;
      background-image: url(../../public/images/7_01.jpg);
      background-size: 100% 100%;
      box-sizing: border-box;
      .px2rem(padding-left,60);
      .px2rem(padding-right,60);
      .px2rem(padding-top,152);
      .px2rem(padding-bottom,50);
      
      .prospeItems {
        width: 50%;
        height: 47%;
        
        .tag {
          .px2rem(width,130);
          .px2rem(height,30);
          .px2rem(font-size,25);
          .px2rem(padding,8);
          letter-spacing: 1px;
          border-top-left-radius: 15px;
          border-bottom-right-radius: 15px;
          background-color: #ef1421;
          color: white;
          
        }
        
        .title {
          .px2rem(margin-top,20);
          .px2rem(font-size,35);
          .px2rem(margin-left,30);
          font-weight: 700;
        }
        
        .title2 {
          .px2rem(font-size,25);
          .px2rem(margin-left,30);
        }
        
        .proImg {
          .px2rem(width,185);
          .px2rem(height,165);
          float: right;
          
          img {
            width: 100%;
          }
        }
        
        .proInfo {
          .px2rem(font-size,35);
          .px2rem(line-height,42);
          color: #e60821;
          clear: both;
          float: right;
          display: flex;
          vertical-align: center;
          
          .pointImg {
            .px2rem(width,42);
            .px2rem(height,42);
            
          }
          
          .point {
            font-weight: 700;
          }
        }
      } 
    }
  
    .pronortype {
      .ptype {
        .title {
          text-align: center;
          img {
            .px2rem(width,550);
          }
        }
        .cImg {
          text-align: center;
          .px2rem(height,376);
          .px2rem(padding-left,35);
          .px2rem(padding-right,35);
          img {
            width: 100%;
            height: 100%;
          }
        }
        
        .proList {
          width: 100%;
          box-sizing: border-box;
          .px2rem(padding,30);
          overflow: hidden;
          
          .colScroll {
            width: 100%;
            overflow-x: scroll;
            
            .col {
              display: flex;
              width: 600px;
              .px2rem(margin-bottom,30);
              
              .row {
                .px2rem(margin-right,30);
                .px2rem(width,276);
                .px2rem(height,276);
                border: 1px solid #c5a65a;
                border-radius: 6px;
            
                .proImg {
                  width: 100%;
                  .px2rem(height,187);
                 
                  img {
                    width: 100%;
                    height: 100%;
                  } 
                }
                
                .proNmae {
                  text-align: center;
                  .px2rem(font-size,30);
                  background-color: #c5a65a;
                  color: white;
                }
                
                .proInfo {
                  display: flex;
                  box-sizing: border-box;
                  .px2rem(padding-left,10);
                  .px2rem(padding-right,10);
                  
                  span {
                    flex:1;
                    color: #e46963;
                    .px2rem(font-size,16);
                    .px2rem(line-height,50);
                    text-align: center;
                  }
                  
                  .proPrice {
                    .px2rem(font-size,30);
                    font-weight: 700;
                  }
                  
                  .isChioce {
                    .px2rem(font-size,34);
                  }
                }
              } 
            }
          }
        }
      }
    }
  }
}

</style>
